@import "~taro-ui/dist/style/components/rate.scss";
@import "~taro-ui/dist/style/components/icon.scss";
@import "~taro-ui/dist/style/components/tabs.scss";

page {
    background: white;
}

.book-detail-page {
    padding-bottom: 120px;
    .infos {
        background: white;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 40px 20px;
        .info-left {
            image {
                width: 276px;
                height: 324px;
                vertical-align: middle;
            }
        }
        .info-right {
            flex: 1;
            padding-left: 40px;
            font-size: 24px;
            .book-name {
                color: #000;
                font-size: 36px;
                font-weight: bold;
            }
            .book-tags {
                text-align: left;
                margin-top: 10px;
                .tag {
                    display: inline-block;
                    background: #F3F4F5;
                    padding: 4px 12px;
                    border-radius: 8px;
                    font-size: 20px;
                    color: #FF6632;
                    &:nth-child(n+2) {
                        margin-left: 10px;
                    }
                }
                .green {
                    color: #06CC94;
                }
                .black {
                    color: #4A4A4A;
                }
                .orange {
                    color: #FF6632;
                }
            }
            .book-field {
                position: relative;
                margin-top: 14px;
                .field-name {
                    // width: 100px;
                    color: #4A4A4A;
                    // display: inline-block;
                }
                .field-value {
                    color: #9B9B9B;
                }
                .field-rate {
                    position: relative;
                    top: -14px;
                    display: inline-block;
                }
            }
            .book-btns {
                text-align: left;
                font-size: 26px;
                padding-top: 20px;
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                .filters-btn-confirm {
                    display: inline-block;
                    background: white;
                    color: #06CC94;
                    border-radius: 30px;
                    padding: 6px 28px;
                    margin-left: 0px;
                    border: 2px solid #06CC94;
                    box-sizing: border-box;
                }
                .coll {
                    color: #5E5D5D;
                    font-size: 26px;
                    position: absolute;
                    // bottom: 0px;
                    right: 20px;
                    image {
                        width:28px;
                        height:28px;
                        margin-right: 10px;
                        vertical-align: middle;
                        position: relative;
                        top: -4px;
                        vertical-align: bottom;

                    }
                }
            }
        }
    }

    .voice-wrap {
        height: 160px;
        border-top: 2px solid #eee;
        display: flex;
        align-items: center;
        text-align: center;
        .left {
            width: 200px;
            image {
                width: 80px;
                height: 80px;
            }
        }
        .right {
            flex: 1;
            .slider {
                position: relative;
                // top: 26px;
                // left: 50px;
                .start-time {
                    display: inline-block;
                    position: absolute;
                    left: 6px;
                    top: 34px;
                    color: #999999;
                }
                .slider-width {
                    width: 500px;
                    // position: absolute;
                    // left: 80px;
                }
                .end-time {
                    display: inline-block;
                    position: absolute;
                    right: 58px;
                    top: 34px;
                    color: #999999;
                    z-index: 10;
                }
            }
        }
    }

    .content-wrap {
        background: white;
        .join-ad {
            padding: 40px 0px;
            text-align: center;
            image {
                width: 630px;
            }
        }
        .content {
            padding: 30px;
            .course-items {
                // padding-top: 20px;
                height: 100%;
                .course-item {
                    display: flex;
                    flex-direction: row;
                    font-size: 26px;
                    color: #999;
                    // align-items: center;
                    align-items: center;
                    line-height: 40px;
                    padding-bottom: 20px;
                    border-bottom: 2px solid #eee;
                    &:nth-child(n+2) {
                        margin-top: 40px;
                    }
                    &:nth-last-child(1) {
                        border-bottom: 0px;
                    }
                    &-left {
                        width: 80px;
                        text-align: left;
                        .seq {
                            font-size: 32px;
                            color: #333;
                        }
                        .time {
                            margin-top: 20px;
                            height: 80px;
                        }
                    }
                    &-right {
                        flex: 1;
                        .title {
                            font-size: 32px;
                            color: #333;
                            position: relative;
                            line-height: 40px;
                            margin-right: 14px;
                            .block-vip {
                                color: #41C89F;
                                border: 2px solid #41C89F;
                                padding: 2px 14px;
                                font-size: 20px;
                                display: inline-block;
                                // margin-left: 14px;
                                border-radius: 6px;
                                line-height: initial;
                                position: relative;
                                top: 4px;
                                vertical-align: top;
                            }
                        }
                        .desc {
                            margin-top: 10px;
                            // height: 80px;
                        }
                    }
                    &-playicon {
                        width: 60px;
                        text-align: center;
                        image {
                            width: 40px;
                        }
                        .play-icon {
                            width: 54px;
                        }
                    }
                    &.actived {
                        .seq {
                            color: #DE901B;
                        }
                        .title {
                            color: #DE901B;
                        }
                    }
                }
            }
        }

        .real-content {
            line-height: 50px;
        }

        .real-content-hide {
            display: none;
        }
        .file-annex-title{
            padding: 40px 10px;
            font-weight: bold;
        }
        .file-annex-name{
            margin: 0px 10px;
            padding: 30px 10px;
            font-weight: 200;
            background: #a5f3dd;
            text-decoration: underline;
        }
    }
}

.at-tabs {
    &__item {
        color: #5E5D5D;
        &--active {
            color: #52D5AA;
        }
        &-underline {
            width: 64px;
            margin: 0px auto;
            right: 0;
            bottom: 0px;
            height: 6px;
            background: #52D5AA;
            border-radius: 2px;
        
        }
    }
    border-bottom: 2px solid #F3F4F5;
}

.global-btn-wrap {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 16px 125px;
    box-sizing: border-box;
    background: #F9FAFB;
}